<template>
    <el-form :model="userInfoAddForm" label-width="120px" :rules="rules">
    <el-form-item label="客户名称" prop="name">
      <el-input v-model="userInfoAddForm.name"/>
    </el-form-item>
    <el-row justify="space-between">
    <el-col :span="12">
    <el-form-item label="客户类型" prop="type">
      <el-radio-group v-model="userInfoAddForm.type">
        <el-radio label="1" value="1">企业</el-radio>
        <el-radio label="2" value="2">个人</el-radio>
      </el-radio-group>
    </el-form-item>
   </el-col>
   <el-col :span="12">
    <el-form-item label="客户状态" prop="status">
      <el-select v-model="userInfoAddForm.status" placeholder="请选择客户状态">
        <el-option label="未沟通" value="1" />
        <el-option label="有意向" value="2" />
        <el-option label="无意向" value="3" />
        <el-option label="已成交" value="4" />
        <el-option label="信息有误" value="5" />
      </el-select>
    </el-form-item>
    </el-col> 
    </el-row>  
    <el-form-item label="客户标签" prop="labels">
      <el-select v-model="userInfoAddForm.labels" placeholder="请选择客户标签">
        <el-option label="仓储" value="4" />
        <el-option label="青岛" value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="userInfoAddForm.address" placeholder="请输入地址"/>
    </el-form-item>
    <el-row justify="space-between">
    <el-col :span="12">
    <el-form-item label="手机号1">
        <el-input v-model="userInfoAddForm.mobileNo1" placeholder="请输入"/>
    </el-form-item>
   </el-col>
   <el-col :span="12">
    <el-form-item label="手机号2">
        <el-input v-model="userInfoAddForm.mobileNo2" placeholder="请输入"/>
    </el-form-item>
    </el-col> 
    </el-row> 
    <el-form-item label="手机号3">
      <el-input v-model="userInfoAddForm.mobileNo3" placeholder="请输入"/>
    </el-form-item>

    <el-row justify="space-between">
    <el-col :span="12">
    <el-form-item label="座机1">
        <el-input v-model="userInfoAddForm.telNo1" placeholder="请输入"/>
    </el-form-item>
   </el-col>
   <el-col :span="12">
    <el-form-item label="座机2">
        <el-input v-model="userInfoAddForm.telNo2" placeholder="请输入"/>
    </el-form-item>
    </el-col> 
    </el-row> 
    <el-form-item label="座机3">
      <el-input v-model="userInfoAddForm.telNo3" placeholder="请输入"/>
    </el-form-item>

    <el-row justify="space-between">
    <el-col :span="12">
    <el-form-item label="邮箱1">
        <el-input v-model="userInfoAddForm.mailAddress1" placeholder="请输入"/>
    </el-form-item>
   </el-col>
   <el-col :span="12">
    <el-form-item label="邮箱2">
        <el-input v-model="userInfoAddForm.mailAddress2" placeholder="请输入"/>
    </el-form-item>
    </el-col> 
    </el-row> 
    <el-form-item label="邮箱3">
      <el-input v-model="userInfoAddForm.mailAddress3" placeholder="请输入"/>
    </el-form-item>
    <el-form-item label="销售人员">
      <el-select v-model="userInfoAddForm.saleUserId" placeholder="请选择" style="width: 100%">
        <el-option label="墨" value="1aae1d6410a04d86b28fc5f2e055f0a5" />
        <el-option label="简单" value="a47082765892416db827bebf2de2fb99" />
        <el-option label="系统" value="b12f736059694186a25ff0bbff2df819" />
      </el-select>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="userInfoAddForm.remark" type="textarea" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive} from "vue";
const userInfoAddForm = ref({
   name: "",
   type: "",
   status: "",
   labels: "",
   address: "",
   mobileNo1: "",
   mobileNo2: "",
   mobileNo3: "",
   telNo1: "",
   telNo2: "",
   telNo3: "",
   mailAddress1: "",
   mailAddress2: "",
   mailAddress3: "",
   saleUserId: "",
   remark: ""
})
const rules = reactive<any>({
name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 5, message: '2-5个字', trigger: 'blur' },
  ],
  type: [
    {
      required: true,
      message: '请选择客户类型',
      trigger: 'change',
    },
  ],
  status: [
    {
      required: true,
      message: '请选择客户状态',
      trigger: 'change',
    },
  ],
  labels: [
    { required: true, message: '请选择客户标签', trigger: 'blur' },
  ],
})

defineExpose({
  userInfoAddForm
})
</script>

<style scoped>
.el-form{
    width: 80%
}
</style>